<template>
  <div class="login">
    <header class="login-header ml50">
      <img class="login-header__logo" src="@/assets/logo.png" alt="" />
      <h1 class="login-header__title">供应链业管平台</h1>
    </header>
    <main class="login-container">
      <div>
        <h1 class="mb50">手机验证码登录</h1>
        <el-form label-width="80px" ref="form" :rules="rules" :model="loginParams">
          <el-form-item label="手机号码" prop="mobileNo">
            <el-input placeholder="请输入手机号" v-model="loginParams.mobileNo"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="smsCode">
            <div class="verification-code">
              <el-input placeholder="请输入验证码" v-model="loginParams.smsCode"></el-input>
              <div class="verification-code__sendBtn" slot="suffix">
                <div class="verification-code__sendBtn--num" v-if="countDown > -1">{{ countDown }} s</div>
                <div @click="sendCode" v-else>获取验证码</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" class="login-container__btn" @click="login()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </main>
  </div>
</template>

<script>
import { phoneReg } from '@/utils/validator'
import { setCookie } from '@/utils/utils'
const isPhone = (rule, value, callback) => {
  if (!value) callback(new Error('请输入手机号'))
  else {
    if (!phoneReg(value)) return callback(new Error('请输入正确的手机号'))
    callback()
  }
}

export default {
  name: 'login',
  data() {
    return {
      interval: null,
      loginParams: {
        mobileNo: '',
        smsCode: '',
      },
      rules: {
        mobileNo: [{ required: true, validator: isPhone, trigger: 'blur' }],
        smsCode: [{ required: true, message: '请输入验证码' }],
      },
      countDown: -1,
    }
  },
  methods: {
    async sendCode() {
      if (String(this.loginParams.mobileNo).length !== 11) {
        this.$message.error('请输入正确的手机格式')
        return
      }
      await this.sendSmsCodeRequest()
      this.startCountDown()
    },

    startCountDown() {
      clearInterval(this.interval)
      this.countDown = 60
      this.interval = setInterval(() => {
        if (this.countDown < 0) {
          clearInterval(this.interval)
        } else {
          this.countDown--
        }
      }, 1000)
    },
    login() {
      this.$refs['form'].validate(async valid => {
        if (!valid) return
        await this.sendLoginRequest()
      })
    },
    async sendSmsCodeRequest() {
      await this.$http.post(`/login/get_sms_code`, {
        mobileNo: this.loginParams.mobileNo,
      })
      this.$message.success('短信已发送，请查收~')
    },
    async sendLoginRequest() {
      const result = await this.$http.post(`/login/verify_sms_code`, this.loginParams)

      setCookie('Authorization', 'Base ' + result.token)
      this.$router.push({ name: 'layout' })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
